<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-input v-model="state.queryForm.createName" placeholder="创建人" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%">
			<el-table-column label="序号" type="index" width="60"></el-table-column>
			<el-table-column prop="createName" label="创建人" header-align="center" align="center"></el-table-column>
			<el-table-column prop="addType" label="入库类型" header-align="center" align="center">
				<template #default="scope">
					<span v-if="scope.row.addType ==1">采购入库</span>
					<span v-if="scope.row.addType ==2">科室回收</span>
					<span v-if="scope.row.addType ==3">调拨入库</span>
				</template>
			</el-table-column>
			<el-table-column prop="addTime" label="入库时间" header-align="center" align="center"></el-table-column>
			<el-table-column prop="docNo" label="入库单号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="invoiceNo" label="发票号" header-align="center" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-button type="primary" @click="viewDetail(scope.row)">查看</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<el-dialog v-model="visible" :title="''" :close-on-click-modal="false" draggable>
			<div style="width: 100%" align="center">
				<div id="printTest" style="width: 100%" align="center">
					<h1 style="margin-top: 10px; margin-bottom: 10px">药品采购单</h1>
					<div style="width: 100%; height: 30px">
						<div style="float: left; width: 10%; text-align: left">日期：</div>
						<div style="float: left; width: 25%; text-align: left">{{ dataForm.addTime }}</div>
						<div style="float: left; width: 10%; text-align: left">制单人：</div>
						<div style="float: left; width: 15%; text-align: left">{{ dataForm.createName }}</div>
						<div style="float: left; width: 10%; text-align: left">单据号：</div>
						<div style="float: left; width: 15%; text-align: left">{{ dataForm.docNo }}</div>
					</div>
					<table class="tb" style="width: 100%; border: 1px solid #000000; border-collapse: collapse">
						<tbody>
							<tr>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">序号</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">药品名称</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">药品规格</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">数量</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">销售价格</td>
							</tr>
							<tr v-for="(printItem, index) in state.queryForm.detailList" :key="index">
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ index + 1 }}</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.goodName }}</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.goodSpec }}</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.goodCount }}</td>
								<td style="text-align: center; border: 1px solid #000000; border-collapse: collapse">{{ printItem.salePrice }}</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div style="margin-top: 10px">
					<el-button type="primary" class="btnbutton" @click="handlePrintJs">打印</el-button>
					<el-button type="primary" class="btnbutton" @click="closeprint">取消</el-button>
				</div>
			</div>
		</el-dialog>
	</el-card>
</template>

<script setup lang="ts" name="SysPostIndex">
import { useCrud } from '@/hooks'
import { reactive, ref, getCurrentInstance } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { getUseHouseDetailListApi } from '@/api/sys/good'
import printJs from 'print-js'

const visible = ref(false)
let proxy = getCurrentInstance()
const state: IHooksOptions = reactive({
	dataListUrl: '/sys/houselist/page',
	deleteUrl: '',
	queryForm: {
		detailList: [],
		createName: '',
		orgId: localStorage.getItem('org')
	}
})

const handlePrintJs = () => {
	printJs({
		printable: 'printTest',
		type: 'html',
		targetStyle: ['*'],
		scanStyles: false
	})
}
const dataForm = reactive({
	titleval: '采购列表',
	createName: '',
	addTime: '',
	docNo: '',
	invoiceNo: ''
})
const init = () => {
	visible.value = true
}
const viewDetail = (row: any) => {
	dataForm.createName = row.createName
	dataForm.addTime = row.addTime
	dataForm.docNo = row.docNo
	dataForm.invoiceNo = row.invoiceNo
	let param = { parentId: row.uid, page: 1, limit: 1 }
	getUseHouseDetailListApi(param).then(res => {
		state.queryForm.detailList = res.data
		visible.value = true
	})
}
const closeprint = () => {
	visible.value = false
}
const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)

defineExpose({
	init
})
</script>

<style scoped>
</style>